<!DOCTYPE html lang="it">
<html>
<head>
<meta charset="utf-8">
<title>Travel Wish Site</title>

<!-- <link rel=stylesheet href=css/style.css type=text/css>
<link rel=stylesheet href=css/style-menu-bar.css type=text/css> -->
<link rel=stylesheet href=css/test-output.css type=text/css>
<!-- link rel=stylesheet href=css/test.css type=text/css> -->

<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
	<script>
		var el = document.getElementsByTagName("body")[0];
		el.className = "";
	</script>

	<noscript>
		<!--[if IE]>
            	<link rel="stylesheet" href="css/ie.css">
            <![endif]-->
	</noscript>

	<header>
		<hgroup>
			<h1>Wish travel! The site of your desired trip</h1>
			<h2>Take advantage ask for your ideal vacation or a trip you'dlike to do!</h2>
		</hgroup>
		<nav id="topNav">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Some Ideas</a></li>
				<li><a href="#" title="English (UK)">English (UK)</a>
					<ul>
					<li><a href="#">English (US)</a></li>
					<li><a href="#">Italiano</a></li>
					<li class="last"><a href="#">Deutsch</a></li>
					</ul>
				</li>
				<li class="last"><a href="#">My Travel Wish</a></li>
			</ul>
		</nav>
	</header>
		
	<section id="introduction">
		<header>
			<h2>Do you love travel as much as we do?</h2>
		</header>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
			do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
			enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
			ut.</p>
	</section>

	<div id="content">
		<aside>
			<section>
				<h1>Select Facet</h1>
				<h4>Indicate your desire here:</h4>
				<form id="facet">
					<fieldset name="price">
						<legend>Indicate yuor favorite price</legend>
						<ol>
							<li>
							<div><label>Price:</label>
								<input id="prezzo" name="prezzo"type="range" min=30 max=200 value=10>
								<output for="prezzo">30</output></div>
							</li>
						</ol>
					</fieldset>
					<fieldset name="servizi">
						<legend>Provide your desired services</legend>
						<ol>
							<li>
								<input type="checkbox"><label>Parking</label>
							</li>
							<li>
								<input type="checkbox"><label>InternetServices</label>
							</li>
							<li>
								<input type="checkbox"><label>FitnessCenter</label>
							</li>
							<li>
								<input type="checkbox"><label>FamilyRooms</label>
							</li>
							<li>
								<input type="checkbox"><label>OutdoorSwimming Pool</label>
							</li>
							<li>
								<input type="checkbox"><label>Restaurant</label
							></li>
						</ol>
					</fieldset>
					<fieldset name="hotel">
						<legend>Select your preferred accommodation</legend>
						<ol>
							<li>
								<input type="checkbox"><label>Apertament</label>
							</li>
							<li>
								<input type="checkbox"><label>Hotel</label>
							</li>
							<li>
								<input type="checkbox"><label>Recidence</label>
							</li>
							<li>
								<input type="checkbox"><label>Bad andBreakfast</label>
							</li>
							<li>
								<input type="checkbox"><label>Hostel</label>
							</li>
							<li>
								<input type="checkbox"><label>Camping</label>
							</li>
						</ol>
					</fieldset>
				</form>
			</section>
		</aside>
		<div id="mainContent">
			<section>
				<h1>Make wish</h1>
				<h4>Indicate your desire here:</h4>
				<form id="desire" action="facet.action" method="post">
					<fieldset name="keywords">
						<legend>Check your choice</legend>
						<ol>
							<li>
								<label for="servizi">Servizi:</label>
								<input id="servizi" type="text" /></li>
							<li>
								<label for="tipologia">Tipologia:</label>
								<input id="tipologia" type="text" />
							</li>
							<li>
								<label for="prezzo">Prezzo:</label>
								<input id="prezzo" type="range" min="30" max="500" step="10" />
							</li>
							<li>
								<label for="tema">Tema:</label>
								<input id="tema"type="text" />
							</li>
						</ol>
					</fieldset>

					<fieldset name="message">
						<legend>Message</legend>
						<ol>
							<li>
								<label for="messaggio"> Message:</label>
								 <textarea
										id="messaggio" name="messaggio"
										placeholder="Write your message here (max 500 characters)"
										maxlength="500" required autofocus></textarea>
							</li>
						</ol>
					</fieldset>

					<fieldset>
						<!-- 	<button type="reset" >Reset form</button> -->
						<button type="submit">Submit your desire to travel!</button>
					</fieldset>
				</form>
			</section>
		</div>
	</div>	
	<footer>
		<dl>
			<dt>Created by</dt>
			<dd>
				<address>
					<a href="mailto:ing.dicesare@gmail.com">Luca Di Cesare</a>
				</address>
			</dd>
		</dl>
		<small>All rights reserved</small>
	</footer>

	<script src="js/jquery.js"></script>
	<script src="js/nocache.js"></script>
	<script src="js/modernizr.js"></script>
	<script src="js/show-output.js"></script>

	<script>
		(function($) {

			//cache nav

			var nav = $("#topNav");

			//add indicator and hovers to submenu parents

			nav.find("li").each(function() {

				if ($(this).find("ul").length > 0) {

					$("<span>").text("^").appendTo($(this).children(":first"));

					//show subnav on hover

					$(this).mouseenter(function() {

						$(this).find("ul").stop(true, true).slideDown();

					});

					//hide submenus on exit

					$(this).mouseleave(function() {

						$(this).find("ul").stop(true, true).slideUp();

					});

				}

			});

		})(jQuery);
	</script>

</body>
</html>
